<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>给婉怡bb的一封信</title>
		<link rel="icon" href="img/a03/logo_32.ico" type="image/x-icon">
		<link type="text/css" rel="stylesheet" href="./file/default.css">
		<script type="text/javascript" src="./file/jquery.min.js"></script>
		<script type="text/javascript" src="./file/jscex.min.js"></script>
		<script type="text/javascript" src="./file/jscex-parser.js"></script>
		<script type="text/javascript" src="./file/jscex-jit.js"></script>
		<script type="text/javascript" src="./file/jscex-builderbase.min.js"></script>
		<script type="text/javascript" src="./file/jscex-async.min.js"></script>
		<script type="text/javascript" src="./file/jscex-async-powerpack.min.js"></script>
		<script type="text/javascript" src="./file/functions.js" charset="utf-8"></script>
		<script type="text/javascript" src="./file/love.js" charset="utf-8"></script>
		<style type="text/css">
		</style>
	</head>
	<body>
         <audio autoplay="autoplay" loop="loop" preload="auto" ><source src="https://sharefs.ali.kugou.com/202205230004/437be5ad2ca5709cb3315e66be013e7f/G247/M06/03/07/l4cBAF-vg3iIQCaDAAOoPNLDB5IAAALkwD18AoAA6hU866.mp3" type="audio/mpeg"></audio>
		<div id="main">
			<div id="wrap">
                <div id="text">
                    <div id="code"> <font color="#FF0000"> <span class="say">可爱又迷人的婉怡bb~</span><br>
                      <span class="say"> 一年一度的520，一年又一年单身的你。</span><br>
                      <span class="say">世界都充满恋爱酸臭味的一天,浑身散发着单身狗迷人芬芳的你 哈哈哈哈哈</span><br>
					  <br>
                      <span class="say">此刻有人会收到鲜花,有人会收到戒指,有人会收到情书,有人会求婚.有人收到程序猿式浪漫</span><br>
                      <span class="say">以后看我秃头别嘲笑我就好,哈哈哈哈哈哈哈哈,虽然单身 但咱们也是要应个景,凑个热闹。节日快乐</span><br>
                      <span class="say">在往后的日子,我们都要努力发光发亮,热爱自己,热爱生活<span class="space"></span> -- Cx330</span> </font>
                          <br />
                          <br />
                      </p>
                    </div>
                  </div>
                <div id="clock-box">
                    <span class="STYLE1"></span><font color="#33CC00">愿经时久,友情亦在</font>
                  <div id="clock"></div>
              </div>
                <canvas id="canvas" width="1100" height="680"></canvas>
            </div>
		</div>
		<script>
			// 类似于点击body 触发事件
			$(document).bind("click", function(e) {
				if ($(e.target).closest("#canvas").length == 0) {
					// 这里做处理
					top.location = 'index2.html';
				}
			})
			//表示除了 .openSystem 这个类触发的事件 其他都执行
		</script>
		<script>
			(function() {
				var canvas = $('#canvas');
				if (!canvas[0].getContext) {
					$("#error").show();
					return false;
				}
				var width = canvas.width();
				var height = canvas.height();
				canvas.attr("width", width);
				canvas.attr("height", height);
				var opts = {
					seed: {
						x: width / 2 - 20,
						color: "rgb(190, 26, 37)",
						scale: 2
					},
					branch: [
						[535, 680, 570, 250, 500, 200, 30, 100, [
							[540, 500, 455, 417, 340, 400, 13, 100, [
								[450, 435, 434, 430, 394, 395, 2, 40]
							]],
							[550, 445, 600, 356, 680, 345, 12, 100, [
								[578, 400, 648, 409, 661, 426, 3, 80]
							]],
							[539, 281, 537, 248, 534, 217, 3, 40],
							[546, 397, 413, 247, 328, 244, 9, 80, [
								[427, 286, 383, 253, 371, 205, 2, 40],
								[498, 345, 435, 315, 395, 330, 4, 60]
							]],
							[546, 357, 608, 252, 678, 221, 6, 100, [
								[590, 293, 646, 277, 648, 271, 2, 80]
							]]
						]]
					],
					bloom: {
						num: 700,
						width: 1080,
						height: 650,
					},
					footer: {
						width: 1200,
						height: 5,
						speed: 10,
					}
				}
				var tree = new Tree(canvas[0], width, height, opts);
				var seed = tree.seed;
				var foot = tree.footer;
				var hold = 1;
				canvas.click(function(e) {
					var offset = canvas.offset(),
						x, y;
					x = e.pageX - offset.left;
					y = e.pageY - offset.top;
					if (seed.hover(x, y)) {
						hold = 0;
						canvas.unbind("click");
						canvas.unbind("mousemove");
						canvas.removeClass('hand');
					}
				}).mousemove(function(e) {
					var offset = canvas.offset(),
						x, y;
					x = e.pageX - offset.left;
					y = e.pageY - offset.top;
					canvas.toggleClass('hand', seed.hover(x, y));
				});
				var seedAnimate = eval(Jscex.compile("async", function() {
					seed.draw();
					while (hold) {
						$await(Jscex.Async.sleep(10));
					}
					while (seed.canScale()) {
						seed.scale(0.95);
						$await(Jscex.Async.sleep(10));
					}
					while (seed.canMove()) {
						seed.move(0, 2);
						foot.draw();
						$await(Jscex.Async.sleep(10));
					}
				}));
				var growAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.grow();
						$await(Jscex.Async.sleep(10));
					} while (tree.canGrow());
				}));
				var flowAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.flower(2);
						$await(Jscex.Async.sleep(10));
					} while (tree.canFlower());
				}));
				var moveAnimate = eval(Jscex.compile("async", function() {
					tree.snapshot("p1", 240, 0, 610, 680);
					while (tree.move("p1", 500, 0)) {
						foot.draw();
						$await(Jscex.Async.sleep(10));
					}
					foot.draw();
					tree.snapshot("p2", 500, 0, 610, 680);
					// 会有闪烁不得意这样做, (＞﹏＜)
					canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
					canvas.css("background", "#ffe");
					$await(Jscex.Async.sleep(300));
					canvas.css("background", "none");
				}));
				var jumpAnimate = eval(Jscex.compile("async", function() {
					var ctx = tree.ctx;
					while (true) {
						tree.ctx.clearRect(0, 0, width, height);
						tree.jump();
						foot.draw();
						$await(Jscex.Async.sleep(25));
					}
				}));
				var textAnimate = eval(Jscex.compile("async", function() {
					var together = new Date();
					together.setFullYear(2020, 8, 27); //时间年月日
					together.setHours(0); //小时	
					together.setMinutes(0); //分钟
					together.setSeconds(0); //秒前一位
					together.setMilliseconds(2); //秒第二位
					$("#code").show().typewriter();
					$("#clock-box").fadeIn(500);
					while (true) {
						timeElapse(together);
						$await(Jscex.Async.sleep(1000));
					}
				}));
				var runAsync = eval(Jscex.compile("async", function() {
					$await(seedAnimate());
					$await(growAnimate());
					$await(flowAnimate());
					$await(moveAnimate());
					textAnimate().start();
					$await(jumpAnimate());
				}));
				runAsync().start();
			})();
		</script>
	</body>
</html>
